document.addEventListener('DOMContentLoaded',callback1);
function callback1(){
    const lazyImages=[].slice.call(document.querySelectorAll('img .img-lazy'));
    let active=false;
    window.addEventListener('scroll',lazyLoad);
    function lazyLoad(){
        if(!active){
            active=true;
            setTimeout(()=>{
                    lazyImages.forEach(lazyImage=>{
                        const position=lazyImage.getBoundingClientRect();
                        if(position.top <= window.innerHeight && position.bottom >= 0){
                            lazyImage.src=lazyImage.dataset.src;
                            lazyImage.classList.remove('img-lazy');
                            lazyImages=lazyImages.filter(image=>image !== lazyImage);
                        }
                        if(lazyImages.length === 0){
                            window.removeEventListener('scroll',lazyLoad);
                        }
                    });
                    active=false;
            },200);
        }
    }
};

document.addEventListener('DOMContentLoaded',callback2);
function callback2(){
    const lazyImages=[].slice.call(document.querySelectorAll('img .img-lazy'));
    if(
        'IntersectionObserver' in window &&
        'IntersectionObserverEntry' in window &&
        'intersectionRatio' in window.IntersectionObserverEntry.prototype
    ){
        const lazyImageObserver=new IntersectionObserver((entries,observer)=>{
            entries.forEach(entry=>{
                if(entry.isIntersecting){
                    const lazyImage=entry.target;
                    lazyImage.src=lazyImage.dataset.src;
                    lazyImage.classList.remove('img-lazy');
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        lazyImages.forEach(lazyImage=>lazyImageObserver.observe(lazyImage));
    }
}
